<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- //引入axios包 -->
  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <!-- 移入进度条包 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
</head>

<body>
  <button id="btn">发送axios请求</button>
</body>
<script>

  let btn = document.querySelector(`#btn`)

  // const myaxios = axios.create({
  //   baseURL: '/',
  //   timeout: 1000,
  //   headers: {}
  // });


  btn.onclick = async function () {

    try {
      const re = await axios({

        url: "/user",
        method: "get",
        Headers: {},
         //即将与请求一起发送的url参数
        //  req.puery 
        params: {
          userId: "001",
        },
        data: {name:666},
        timeoust: 10000,
      })
      
      console.log(`re`,re);
      console.log(`re.data`,re.data);
      // re.config
      // re.data
      // re.headers
      // re.request
      // re.status
      // re.statusText
              /* 
          axios成功的值这个对象属性解析:
            - config:是axios请求的时候传入的配置对象
            - data:后端响应的数据
            - headers:响应头
            - request:底层真正使用的xhr实例对象
            - status:响应状态码
            - statusText:响应状态描述
        */
    }catch(e){
      console.log(e.message);
    }

   

  }

</script>

</html>